<!--
 * @Author: wjk
 * @Date: 2020-05-07 09:59:36
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-06 09:03:50
 * @description: file content
-->
<template>
  <view class="user_comment">
    <!-- <baseNav title="用户口碑" nav-position="fixed"></baseNav> -->
    <view class="content">
      <view v-for="(it,idx) in data" :key="idx" class="item">
        <comment-item :comment-data="it" />
      </view>
    </view>
  </view>
</template>

<script>
// import baseNav from '@/components/base/base-nav.vue'
import CommentItem from './components/comment-list'
import { getCommontList } from '@/apis/commont'
export default {
  name: 'UserComment',
  components: {
    // baseNav,
    CommentItem
  },

  data() {
    return {
      data: [],
      refreshing: false,
      loading: false,
      needLoading: true,
      listQuery: {
        page_no: 1,
        page_size: 10,
        goods_id: ''
      }
    }
  },
  onLoad(option) {
    console.log('option', option)
    this.listQuery = { ...this.listQuery, ...option }
    this._getDataList()
  },
  methods: {
    onReachBottom() {
      if (!this.needLoading || this.loading) return
      this.loading = true
      this.listQuery.page_no++
      this._getDataList()
    },
    onPullDownRefresh() {
      if (this.refreshing) return
      this.refreshing = true
      this.needLoading = true // 下拉刷新， 重置可上拉刷新数据获取分页数据
      this.listQuery.page = 1
      this._getDataList()
    },
    async _getDataList() {
      console.log('_getDataList')
      try {
        const { data } = await getCommontList(this.listQuery)
        // 无数据不可上啦刷新
        if (!data.list) {
          this.needLoading = false
          this.loading = false
          return
        }
        this.data = data.list && this.data.concat(data.list)
        // 如果加载更多后 长度未变说明无数据或者总数据小于PageSize， 不能在进行加载更多操作
        this.needLoading = !(data.list.length < 10)
        this.loading = false
        uni.stopPullDownRefresh()
        this.refreshing = false
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user_comment {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
.content {
  // margin-top: 54px;
  .item {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    margin-bottom: 24rpx;
    padding: 20rpx;
  }
}
/deep/ .container {
  padding: 0;
}
</style>
